<!-- 系统配置 -->
<template>
  <div>
    <div class="top">
      <!-- 新增按钮 -->
      <el-button round @click="toAdd" type="success"> 新增</el-button>
    </div>
    <div class="myForm">
      <!-- 表单 -->
      <el-table :data="baseConfig" stripe style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="val" label="值">
          <template slot-scope="scope">
            <span v-if="String(scope.row.val).indexOf('http://')===-1">{{scope.row.val}}</span>
            <img v-else :src="scope.row.val" alt="图片加载失败" width="30px">
          </template>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click="toEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="toDelete(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div class="from">
      <!-- 模态框 -->
      <!--visible:控制模态框显示或隐藏，默认隐藏  -->
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form :model="form" :rules="rules" ref="myForm">
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="介绍" :label-width="formLabelWidth" prop="introduce">
            <el-input v-model="form.introduce" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select placeholder="请选择类型" clearable v-model="type">
              <el-option label="文字" value="文字" />
              <el-option label="图片" value="图片" />
            </el-select>
          </el-form-item>

          <el-form-item label="值" label-width="formLabelWidth" v-if="type==='文字'">

            <el-input v-model="form.val" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-else label="封面" :label-width="formLabelWidth">
            <el-upload class="avatar-uploader" :action=uploadFileURL :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="form.val" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="toClose">取 消</el-button>
          <el-button type="primary" @click="toSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
import { findAll, deleteById, saveOrUpdate } from '@/api/baseConfig'
import { uploadFileURL } from "@/utils/config"
export default {
  data() {
    return {
      baseConfig: [],
      formLabelWidth: '120px',
      // 表单对象
      form: {},
      title: '',
      visible: false,
      type: "文字",
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入配置介绍', trigger: 'blur' }],

      }
      ,
      // 图片上传地址
      uploadFileURL,
      imageUrl: '',
      id: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.val = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 获取所有配置信息
    async getBaseConfig() {
      let res = await findAll()
      // console.log(res);
      this.baseConfig = res.data

    },
    // 添加配置信息
    toAdd() {
      this.visible = true,
        this.title = '添加配置信息',
        this.form = {}
    },
    // 编辑配置信息
    toEdit(row) {
      this.visible = true,
      this.title = '修改配置信息',
      this.form = { ...row }
      if(row.val.indexOf('http://')===-1){
        this.type='文字'
      }else{
        this.type='图片'
      }
      this.imageUrl=this.form.val;
    },
    // 关闭模态框
    toClose() {
      // 重置表单
      this.$refs.myForm.resetFields()
      this.visible = false;
    },
    // 删除
    toDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteById({ id: id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getBaseConfig()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 保存或者更新
    toSubmit() {
      this.$refs.myForm.validate(async (valid) => {
        if (valid) {
          let res = await saveOrUpdate(this.form)
          this.$notify({
            type: 'success',
            message: res.message
          })

          this.getBaseConfig()
          this.toClose()
        } else {
          return false
        }
      })
    },
  },
  created() {
    this.getBaseConfig()


  },
}
</script>